import React from 'react'
import { dictionary } from '../../../utils/dictionary';
import { Form, Input, InputNumber, Select, DatePicker } from 'antd'
import { help } from '../../../utils/help';
import { axhttp } from '../../../utils/axhttp';
const FormItem = Form.Item;
const Option = Select.Option;

const url = {
    readx: '/api/role/readx',
}
const urlUser = {
    readx: '/api/user/readx',
}
const urlBicycle = {
    readx: '/api/bicycle/readx',
}
class FormComponent extends React.Component {
    /** 状态数据 */
    state = {
        /** 管理员信息 */
        users: [],
        bicycles: [],
    }

    componentDidMount() {
        axhttp.getXhr(urlUser.readx).then(res => {
            this.setState({ users: help.transToStandardData(res.data.list, 'id', 'username') });
        });
        axhttp.getXhr(urlBicycle.readx).then(res => {
            this.setState({ bicycles: help.transToStandardData(res.data.list, 'id', 'bicycleName') });
        });
    }

    /** 选择时，将名称保存到对应的表单字段中 */
    handleChangeUser = (userId) => {
        const { form } = this.props;
        const { users } = this.state;

        form.setFieldsValue({
            username: users.find(i => i.value == userId).text,
        });
    }

    /** 选择时，将名称保存到对应的表单字段中 */
    handleChangeBicycle = (id) => {
        const { form } = this.props;
        const { bicycles } = this.state;

        form.setFieldsValue({
            bicycleName: bicycles.find(i => i.value == id).text,
        });
    }

    render() {
        const { form, values = {} } = this.props;
        const { users, bicycles } = this.state;
        const { getFieldDecorator } = form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 }
        };

        return (
            <Form layout="horizontal">
                <FormItem label="车辆编号" {...formItemLayout}>
                    {
                        getFieldDecorator('bicycleCode', {
                            /** 初始值 */
                            initialValue: values.bicycleCode,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '车辆编号不能为空'
                                }
                            ]
                        })(
                            <Select type="text" placeholder="请选择车辆编号" onChange={this.handleChangeBicycle}>
                                {bicycles.map(m => (<Option value={m.value} key={m.value}>{m.text}</Option>))}
                            </Select>
                        )
                    }
                </FormItem>
                <div style={{ display: 'none' }}>
                    <FormItem label="车辆名称" {...formItemLayout}>
                        {
                            getFieldDecorator('bicycleName', {
                                /** 初始值 */
                                initialValue: values.bicycleName,
                            })(
                                <Input type="text" hidden={true} />
                            )
                        }
                    </FormItem>
                </div>
                <FormItem label="用户名" {...formItemLayout}>
                    {
                        getFieldDecorator('userId', {
                            /** 初始值 */
                            initialValue: values.userId,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '用户名不能为空'
                                }
                            ]
                        })(
                            <Select type="text" placeholder="请选择用户" onChange={this.handleChangeUser}>
                                {users.map(m => (<Option value={m.value} key={m.value}>{m.text}</Option>))}
                            </Select>
                        )}
                </FormItem>
                <div style={{ display: 'none' }}>
                    <FormItem label="用户姓名" {...formItemLayout}>
                        {
                            getFieldDecorator('username', {
                                /** 初始值 */
                                initialValue: values.username,
                            })(
                                <Input type="text" hidden={true} />
                            )
                        }
                    </FormItem>
                </div>
                <FormItem label="手机号" {...formItemLayout}>
                    {
                        getFieldDecorator('mobile', {
                            /** 初始值 */
                            initialValue: values.mobile,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '手机号不能为空'
                                }
                            ]
                        })(
                            <Input type="text" placeholder="请输入手机号" />
                        )
                    }
                </FormItem>
                <FormItem label="里程(km)" {...formItemLayout}>
                    {
                        getFieldDecorator('distance', {
                            /** 初始值 */
                            initialValue: values.distance,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '里程不能为空'
                                }
                            ]
                        })(
                            <InputNumber placeholder="请输入里程" style={{ width: '100%' }} />
                        )
                    }
                </FormItem>
                <FormItem label="行驶时长" {...formItemLayout}>
                    {
                        getFieldDecorator('totalTime', {
                            /** 初始值 */
                            initialValue: values.totalTime,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '行驶时长不能为空'
                                }
                            ]
                        })(
                            <InputNumber placeholder="请输入行驶时长" style={{ width: '100%' }} />
                        )
                    }
                </FormItem>
                <FormItem label="订单状态" {...formItemLayout}>
                    {
                        getFieldDecorator('orderStatus', {
                            /** 初始值 */
                            initialValue: values.orderStatus,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '订单状态不能为空'
                                }
                            ]
                        })(
                            <Select type="text" placeholder="请选择订单状态">
                                {dictionary.orderStatus.map(m => (<Option value={m.value} key={m.value}>{m.text}</Option>))}
                            </Select>
                        )}
                </FormItem>
                <FormItem label="起始地址" {...formItemLayout}>
                    {
                        getFieldDecorator('startAddr', {
                            /** 初始值 */
                            initialValue: values.startAddr,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '起始地址不能为空'
                                }
                            ]
                        })(
                            <Input type="text" placeholder="请输入起始地址" />
                        )
                    }
                </FormItem>
                <FormItem label="结束地址" {...formItemLayout}>
                    {
                        getFieldDecorator('endAddr', {
                            /** 初始值 */
                            initialValue: values.endAddr,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '结束地址不能为空'
                                }
                            ]
                        })(
                            <Input type="text" placeholder="请输入结束地址" />
                        )
                    }
                </FormItem>
                <FormItem label="开始时间" {...formItemLayout}>
                    {
                        getFieldDecorator('startTime', {
                            /** 初始值 */
                            initialValue: help.transDateTime(values.startTime, 'YYYY-MM-DD HH:mm:ss')
                        })(
                            <DatePicker
                                format='YYYY-MM-DD HH:mm:ss'
                            />
                        )}
                </FormItem>
                <FormItem label="结束时间" {...formItemLayout}>
                    {
                        getFieldDecorator('endTime', {
                            /** 初始值 */
                            initialValue: help.transDateTime(values.endTime, 'YYYY-MM-DD HH:mm:ss')
                        })(
                            <DatePicker
                                format='YYYY-MM-DD HH:mm:ss'
                            />
                        )}
                </FormItem>
                <FormItem label="订单金额" {...formItemLayout}>
                    {
                        getFieldDecorator('totalFee', {
                            /** 初始值 */
                            initialValue: values.totalFee,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '订单金额不能为空'
                                }
                            ]
                        })(
                            <InputNumber placeholder="请输入订单金额" style={{ width: '100%' }} />
                        )
                    }
                </FormItem>
                <FormItem label="实付金额" {...formItemLayout}>
                    {
                        getFieldDecorator('payedFee', {
                            /** 初始值 */
                            initialValue: values.payedFee,
                            rules: [
                                {
                                    /** 是否必填 */
                                    required: true,
                                    /** 错误提示信息 */
                                    message: '实付金额不能为空'
                                }
                            ]
                        })(
                            <InputNumber placeholder="请输入实付金额" style={{ width: '100%' }} />
                        )
                    }
                </FormItem>
            </Form>
        );
    }
}

export default Form.create({})(FormComponent);